<template>
  <van-nav-bar title="用户中心" />
  <van-cell-group>
    <van-cell>
      <template #title>
        <van-button icon="user-o" type="primary" size="small" plain hairlin round>
          {{ UserInfo.account }} | {{ UserInfo.name }}
        </van-button>
        <span style="margin-left: 10px;vertical-align: bottom; color: grey;">欢迎您登录系统！</span>
      </template>
    </van-cell>
  </van-cell-group>
  <van-grid clickable :column-num="2" :gutter="2">
    <van-grid-item icon="balance-list" text="财务管理" to="/finance" />
    <van-grid-item icon="cluster" text="族谱" to="/clan" />
    <van-grid-item icon="clear" text="退出登录" @click="quitSystem" />
  </van-grid>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { Wap, User } from "../../../common/wap";
import { ref } from "vue";
import type { Ref } from "vue";

const router = useRouter();

const UserInfo: Ref<KvObj> = ref({});

function quitSystem() {
  Wap.loginQuit();
  // 主动退出登录时-清除登录缓存
  Wap.saveLgRemeberUser(false);
  location.href = "/api/login/quit";
}

// 默认运行
(() => {
  new User({
    onData(uInfo?: KvObj) {
      if (!this.isLogin) {
        Wap.delayTodo(() => {
          router.push("/");
        });
        return;
      }

      if (uInfo) {
        UserInfo.value = uInfo;
      }
    },
  });
})();
</script>